<template>
	<view class="pages">
		<view :style="'height:'+head+'px'"></view>
		<view style="height: 88rpx;"></view>
		
		<view class="tops">
			<view class="user" v-if="info.u">
				<image class="avatar" :src="getimg(info.u.avatar)"></image>
				<view class="fr">
					<text class="nickname">{{info.u.nickname}}</text>
					<text class="infos" style="margin-left: 20rpx;">{{getsf(info.u.group_id)}}</text>
				</view>
			</view>
			
			<view class="lists fr">
				<view class="dan" v-for="d of datas" :key="d.name">
					<text class="val">{{d.val}}</text>
					<text class="name">{{d.name}}</text>
				</view>
			</view>
		</view>
		
		<view class="gongneng fr">
			<view class="gd btn" v-for="d of menu" :key="d.name" @click="openwin(d.path)">
				<image class="icon" :src="d.icon"></image>
				<text class="gdname">{{d.name}}</text>
			</view>
		</view>
		
		<!--数据-->
		<view class="datas">
			<view class="change_left flex">
				<view class="left" 
					:style="'background:'+(index==1?'linear-gradient(to bottom right, #ffcfe5, #b7e5ff)':'#efefef')"
					@click="index = 1">
					<text class="change_t1">团队</text>
				</view>
				
				<view class="right left"
					:style="'background:'+(index==2?'linear-gradient(to bottom right, #ffcfe5, #b7e5ff)':'#efefef')"
					@click="index = 2">
					<text class="change_t1">业绩</text>
				</view>
			</view>

			<view class="kuai" v-if="index == 1 && info.urr">
				<text class="title1">总人数：</text>
				<view class="fr" style="justify-content: space-between;">
					<view class="dank">
						<text class="val1">{{info.urr.all}}</text>
						<text class="info1">总人数</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.urr.jadd}}</text>
						<text class="info1">今日新增</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.urr.zadd}}</text>
						<text class="info1">昨日新增</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.urr.yadd}}</text>
						<text class="info1">本月新增</text>
					</view>
				</view>
				<text class="title1" v-if="t > 1">门店数：</text>
				<view class="fr" style="justify-content: space-between;" v-if="t > 1">
					<view class="dank">
						<text class="val1">{{info.mdarr.all}}</text>
						<text class="info1">总门店</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdarr.jadd}}</text>
						<text class="info1">今日新增</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdarr.zadd}}</text>
						<text class="info1">昨日新增</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdarr.yadd}}</text>
						<text class="info1">本月新增</text>
					</view>
				</view>
			</view>
			
			<view class="kuai" v-if="index == 2 && t>1">
				<text class="title1">门店销量：</text>
				<view class="fr" style="justify-content: space-between;">
					<view class="dank">
						<text class="val1">{{info.mdsale.all?info.mdsale.all:0}}</text>
						<text class="info1">总金额</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdsale.jin?info.mdsale.jin:0}}</text>
						<text class="info1">今日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdsale.zuo?info.mdsale.zuo:0}}</text>
						<text class="info1">昨日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.mdsale.yue?info.mdsale.yue:0}}</text>
						<text class="info1">本月销售</text>
					</view>
				</view>
				<text class="title1">竞购销量：</text>
				<view class="fr" style="justify-content: space-between;">
					<view class="dank">
						<text class="val1">{{info.jgsale.all?info.jgsale.all:0}}</text>
						<text class="info1">总金额</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.jgsale.all?info.jgsale.jin:0}}</text>
						<text class="info1">今日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.jgsale.all?info.jgsale.zuo:0}}</text>
						<text class="info1">昨日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.jgsale.all?info.jgsale.yue:0}}</text>
						<text class="info1">本月销售</text>
					</view>
				</view>
				
				<text class="title1">霸王餐销售：</text>
				<view class="fr" style="justify-content: space-between;">
					<view class="dank">
						<text class="val1">{{info.bwsale.all?info.bwsale.all:0}}</text>
						<text class="info1">总金额</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.bwsale.all?info.bwsale.jin:0}}</text>
						<text class="info1">今日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.bwsale.all?info.bwsale.zuo:0}}</text>
						<text class="info1">昨日销售</text>
					</view>
					
					<view class="dank">
						<text class="val1">{{info.bwsale.all?info.bwsale.yue:0}}</text>
						<text class="info1">本月销售</text>
					</view>
				</view>
			</view>
		</view>
		
		<!--图表-->
		<view class="tbcon">
			<view class="fr" style="justify-content: space-between;padding: 20rpx;">
				<view class="fr">
					<uni-icons type="fire-filled" size="30" color="red"></uni-icons>
					<text class="title2">销售</text>
				</view>
				<view class="fr">
					<text :class="'danxuan'+(type == 1?' danxuans':'')" @click="cw(1)">日数据</text>
					<text :class="'danxuan'+(type == 2?' danxuans':'')" @click="cw(2)">月数据</text>
					<text :class="'danxuan'+(type == 3?' danxuans':'')" @click="cw(3)">年数据</text>
				</view>
			</view>
			
			<!-- X轴文字外部显示的自定义曲线图 -->
			<view class="external-x-chart-container">
				<view class="chart-header">
					<text class="chart-title">销售趋势分析</text>
				</view>
				
				<!-- X轴文字外部显示的自定义曲线图实现 -->
				<view class="external-x-chart">
					<!-- Y轴标签区域 -->
					<view class="y-axis-container">
						<view class="y-axis">
							<text class="y-label">{{ maxY > 0 ? formatNumber(maxY) : '0' }}</text>
							<text class="y-label">{{ maxY > 0 ? formatNumber(Math.round(maxY * 0.75)) : '0' }}</text>
							<text class="y-label">{{ maxY > 0 ? formatNumber(Math.round(maxY * 0.5)) : '0' }}</text>
							<text class="y-label">{{ maxY > 0 ? formatNumber(Math.round(maxY * 0.25)) : '0' }}</text>
							<text class="y-label">0</text>
						</view>
						<!-- Y轴标题 -->
						<text class="axis-title y-axis-title">销售额</text>
					</view>
					
					<!-- 主图表区域（不含X轴标签） -->
					<view class="main-chart-area-container">
						<!-- 可滚动的主图表区域 -->
						<view class="scrollable-main-chart-area">
							<!-- 滚动内容容器 -->
							<view class="scroll-content" :style="{ width: chartWidth + 'px' }">
								<!-- 主图表区域 -->
								<view class="main-chart-area">
									<!-- 网格背景 -->
									<view class="grid-background">
										<!-- 水平网格线 -->
										<view class="horizontal-grid">
											<view class="horizontal-line"></view>
											<view class="horizontal-line"></view>
											<view class="horizontal-line"></view>
											<view class="horizontal-line"></view>
											<view class="horizontal-line"></view>
										</view>
										
										<!-- 垂直网格线 -->
										<view class="vertical-grid" v-if="xLabels.length > 0">
											<view 
												class="vertical-line" 
												v-for="(label, index) in xLabels" 
												:key="index"
												:style="{ left: (index * (chartWidth / (xLabels.length - 1))) + 'px' }"
											></view>
										</view>
									</view>
									
									<!-- 渐变填充区域 -->
									<view class="fill-areas">
										<!-- 门店数据填充 -->
										<view 
											class="fill-area store-fill" 
											:style="getFillStyle(storePoints)"
											v-if="storePoints.length > 0"
										></view>
										
										<!-- 竞购数据填充 -->
										<view 
											class="fill-area purchase-fill" 
											:style="getFillStyle(purchasePoints)"
											v-if="purchasePoints.length > 0"
										></view>
										
										<!-- 霸王餐数据填充 -->
										<view 
											class="fill-area meal-fill" 
											:style="getFillStyle(mealPoints)"
											v-if="mealPoints.length > 0"
										></view>
									</view>
									
									<!-- 曲线 -->
									<view class="chart-lines">
										<!-- 门店曲线 -->
										<view 
											class="line store-line" 
											:style="getLineStyle(storePoints)"
											v-if="storePoints.length > 0"
										></view>
										
										<!-- 竞购曲线 -->
										<view 
											class="line purchase-line" 
											:style="getLineStyle(purchasePoints)"
											v-if="purchasePoints.length > 0"
										></view>
										
										<!-- 霸王餐曲线 -->
										<view 
											class="line meal-line" 
											:style="getLineStyle(mealPoints)"
											v-if="mealPoints.length > 0"
										></view>
									</view>
									
									<!-- 数据点 -->
									<view class="data-points">
										<view 
											class="point store-point" 
											v-for="(point, index) in storePoints" 
											:key="'store-' + index"
											:style="{
												left: point.x + 'px',
												bottom: point.y + 'px'
											}"
											v-if="storePoints.length > 0"
										>
											<view class="point-inner"></view>
										</view>
										
										<view 
											class="point purchase-point" 
											v-for="(point, index) in purchasePoints" 
											:key="'purchase-' + index"
											:style="{
												left: point.x + 'px',
												bottom: point.y + 'px'
											}"
											v-if="purchasePoints.length > 0"
										>
											<view class="point-inner"></view>
										</view>
										
										<view 
											class="point meal-point" 
											v-for="(point, index) in mealPoints" 
											:key="'meal-' + index"
											:style="{
												left: point.x + 'px',
												bottom: point.y + 'px'
											}"
											v-if="mealPoints.length > 0"
										>
											<view class="point-inner"></view>
										</view>
									</view>
									
									<!-- X轴线 -->
									<view class="x-axis-line"></view>
								</view>
							</view>
						</view>
						
						<!-- X轴标签（放在图表外部） -->
						<view class="external-x-axis">
							<view class="external-x-axis-labels">
								<text 
									class="external-x-label" 
									v-for="(label, index) in xLabels" 
									:key="index"
									:style="{ left: (index * (chartWidth / (xLabels.length - 1))) + 'px' }"
								>
									{{ label }}
								</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 滚动条 -->
				<view class="scrollbar-container" v-if="chartWidth > 600">
					<view 
						class="scrollbar" 
						:style="{ width: (600 / chartWidth * 100) + '%', left: (scrollLeft / chartWidth * 100) + '%' }"
					></view>
				</view>
				
				<!-- 图例 -->
				<view class="external-x-legend">
					<view class="legend-item">
						<view class="legend-indicator">
							<view class="legend-line store-legend-line"></view>
							<view class="legend-point store-legend-point"></view>
						</view>
						<text class="legend-text">门店</text>
					</view>
					<view class="legend-item">
						<view class="legend-indicator">
							<view class="legend-line purchase-legend-line"></view>
							<view class="legend-point purchase-legend-point"></view>
						</view>
						<text class="legend-text">竞购</text>
					</view>
					<view class="legend-item">
						<view class="legend-indicator">
							<view class="legend-line meal-legend-line"></view>
							<view class="legend-point meal-legend-point"></view>
						</view>
						<text class="legend-text">霸王餐</text>
					</view>
				</view>
			</view>
		</view>
		
		<!--排名-->
		<view class="uni-container" style="background: #ffffff;">
			<view class="fr" style="justify-content: space-between;padding: 20rpx;">
				<view class="fr">
					<uni-icons type="vip-filled" size="30" color="red"></uni-icons>
					<text class="title2">月排行榜</text>
				</view>
				<view class="fr">
					<text :class="'danxuan'+(type1 == 1?' danxuans':'')" @click="cw1(1)">门店</text>
					<text :class="'danxuan'+(type1 == 2?' danxuans':'')" @click="cw1(2)">竞购</text>
					<text :class="'danxuan'+(type1 == 3?' danxuans':'')" @click="cw1(3)">霸王餐</text>
				</view>
			</view>
			
			<uni-table ref="table" stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="248rpx" align="center">昵称</uni-th>
					<uni-th width="248rpx" align="center">销售额</uni-th>
					<uni-th width="248rpx" align="center">排名</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.name }}</uni-td>
					<uni-td align="center">{{ item.sale }}</uni-td>
					<uni-td align="center">{{ item.paiming }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		
		<view class="top">
			<view :style="'height:'+head+'px'"></view>
			<view class="topn fr">
				<uni-icons @click="back" type="back" size="30" style="margin-left:10rpx;" color="#ffffff"></uni-icons>
				<text class="title">分销中心</text>
				<view style="width: 35px;"></view>
			</view>
		</view>
	</view>
</template>

<script>
import $util from '@/util/util'
	export default {
		data() {
			return {
				head:getApp().globalData.head,
				money:0,
				datas:[],
				menu:[
					{name:'我的推广码',icon:'../static/image/member/code.png',path:'/pages/memberinfo/daili/ecode'},
					{name:'补贴中心',icon:'../static/image/member/jinbi.png',path:'/pages/memberinfo/carlist/carlist?type=3'},
					{name:'分销统计',icon:'../static/image/member/code.png',path:'/pages/memberinfo/daili/distribution'}
				],
				list:[],
				info:{},

				index:1,//当前是看团队还是销售
				
				t:1,//身份
				bwsale:{},
				jgsale:{},
				mdsale:{},
				
				// X轴文字外部显示的图表数据
				chartWidth: 700, // 图表宽度
				chartHeight: 400, // 图表高度
				maxY: 0, // Y轴最大值
				storePoints: [], // 门店数据点
				purchasePoints: [], // 竞购数据点
				mealPoints: [], // 霸王餐数据点
				xLabels: [], // X轴标签
				scrollLeft: 0, // 滚动位置
				
				type:1,
				type1:1,
				tableData:[]
			}
		},
		created() {
			// 初始化图表尺寸
			const systemInfo = uni.getSystemInfoSync();
			this.chartWidth = systemInfo.windowWidth - 60; // 减去左右padding
			
			this.getinfo()
			this.getServerData();
			this.cw1()
		},
		onReachBottom() {
			// #ifndef APP
			this.loadmore()
			// #endif
		},
		methods: {
			getsf(t){
				if(t == 1){
					return '普通用户';
				}else if(t == 2){
					return '门店';
				}else if(t == 3){
					return '合伙人';
				}else if(t == 4){
					return '子公司';
				}else if(t == 5){
					return '运营中心';
				}else if(t == 6){
					return '总公司';
				}
				return '普通用户';
			},
			openzhuye(uid){
				$util.openwin('/pages/member/myindex/myindex?touserid='+uid)
			},
			openwin(path){
				if(path == '')return
				
				if(path == 'tixian'){
					this.tixian()
					return
				}
				
				$util.openwin(path)
			},
			changes(i){
				this.s = i;
				this.get_list();
			},
			loadmore(){
				if(this.haveMore && !this.loading){
					console.log('开始触发分页')	
					this.get_list(true);
				}	
			},
			get_list(loading = false){
				let that =this;
				that.loading = true;
				if(!loading){
					that.page = 1;
					that.shoplist = []
					that.haveMore = true
				}
				//$util.showProgress();
				$util.ajax({
					url:'Member/dailiList',
					page:that.page,
				},(res,err)=>{
					//$util.hideProgress();
					console.log(res)
					that.loading = false;
					if(res.code == 1 && res.data.length > 0){
						if(that.page == 1){
							that.shoplist = res.data;
						}else{
							that.shoplist = that.shoplist.concat(res.data)
						}	
					}else{
						that.haveMore = false;
					}
					that.page += 1;
				})	
			},
			getimg(path){
				return $util.get_img(path)
			},
			back(){
				uni.navigateBack()
			},
			getinfo(){
				$util.showProgress()
				$util.ajax({
					url:'Member/ajaxdaili'
				},(r,e)=>{
					$util.hideProgress()
					if(r.code == 1){
						this.info = r.data
						this.datas = r.data.datas
						this.money = r.data.money
						this.t = r.data.u.group_id
					}
				})
			},
			cw(t){
				this.type = t
				this.getServerData()
			},
			cw1(t = 1){
				this.type1 = t
				this.paixu()
			},
			paixu(){
				$util.ajax({
					url:'Member/paihang',
					type:this.type1
				},(r)=>{
					if(r.code == 1){
						this.tableData = r.data
					}
				})	
			},
			getServerData() {
				$util.showProgress()
				$util.ajax({
					url:'Member/fenxi',
					type:this.type
				},(r)=>{
					$util.hideProgress()
					if(r.code == 1){
						// 使用返回的数据绘制X轴文字外部显示的自定义图表
						this.drawExternalXChart(r.data);
					}
				})
			},
			// 绘制X轴文字外部显示的自定义图表
			drawExternalXChart(data) {
				// 设置X轴标签
				this.xLabels = data.h;
				
				// 获取三个数据系列
				const storeData = data.t;    // 门店
				const purchaseData = data.t1; // 竞购
				const mealData = data.t2;     // 霸王餐
				
				// 计算Y轴最大值
				const allData = [...storeData, ...purchaseData, ...mealData];
				this.maxY = Math.max(...allData);
				// 给最大值留一些空间
				this.maxY = Math.ceil(this.maxY * 1.1);
				
				// 根据标签数量调整图表宽度
				if (this.xLabels.length > 10) {
					this.chartWidth = this.xLabels.length * 60; // 每个标签60px宽度
				} else {
					const systemInfo = uni.getSystemInfoSync();
					this.chartWidth = systemInfo.windowWidth - 60; // 减去左右padding
				}
				
				// 计算数据点位置
				this.storePoints = this.calculatePoints(storeData);
				this.purchasePoints = this.calculatePoints(purchaseData);
				this.mealPoints = this.calculatePoints(mealData);
			},
			// 计算数据点位置
			calculatePoints(values) {
				if (!values || values.length === 0) return [];
				
				const points = [];
				const dataLength = values.length;
				const spacing = this.chartWidth / (dataLength - 1);
				
				for (let i = 0; i < dataLength; i++) {
					const x = i * spacing;
					const y = (values[i] / this.maxY) * this.chartHeight;
					points.push({ x, y });
				}
				
				return points;
			},
			// 获取线条样式
			getLineStyle(points) {
				if (points.length === 0) return '';
				
				// 构建SVG路径
				let path = `M ${points[0].x},${this.chartHeight - points[0].y}`;
				for (let i = 1; i < points.length; i++) {
					path += ` L ${points[i].x},${this.chartHeight - points[i].y}`;
				}
				
				// 使用背景图片方式显示SVG路径
				return `background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='${this.chartWidth}' height='${this.chartHeight}'><path d='${path}' stroke='%231890FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");`;
			},
			// 获取填充区域样式
			getFillStyle(points) {
				if (points.length === 0) return '';
				
				// 构建填充区域的SVG路径
				let path = `M ${points[0].x},${this.chartHeight - points[0].y}`;
				for (let i = 1; i < points.length; i++) {
					path += ` L ${points[i].x},${this.chartHeight - points[i].y}`;
				}
				// 闭合路径到X轴
				path += ` L ${points[points.length - 1].x},${this.chartHeight} L ${points[0].x},${this.chartHeight} Z`;
				
				// 使用背景图片方式显示SVG填充区域
				return `background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='${this.chartWidth}' height='${this.chartHeight}'><path d='${path}' fill='url(%23gradient)' fill-opacity='0.2'/><defs><linearGradient id='gradient' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%231890FF' stop-opacity='0.4'/><stop offset='100%' stop-color='%231890FF' stop-opacity='0'/></linearGradient></defs></svg>");`;
			},
			// 格式化数字
			formatNumber(num) {
				if (num >= 10000) {
					return (num / 10000).toFixed(1) + '万';
				} else if (num >= 1000) {
					return (num / 1000).toFixed(1) + '千';
				}
				return num;
			}
		}
	}
</script>

<style scoped>
.tops{
	padding: 20rpx;
	background: #F11E1E;
}
.user{
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	flex-direction: column;
}
.avatar{
	width: 120rpx;
	height: 120rpx;
	border-radius: 120rpx;
	margin-bottom: 20rpx;
}

.nickname{
	font-size: 28rpx;
	font-weight: bold;
	color: #ffffff;
}
.lists{
	display: flex;
	justify-content: space-around;
	margin-top:40rpx;
}
.dan{
	display: flex;
	align-items: center;
	flex-direction: column;
}
.val{
	font-size: 28rpx;
	font-weight: bold;
	color:#ffffff;
}
.name{
	font-size: 28rpx;
	color: #efefef;
}
.gongneng{
	background: #ffffff;
	padding: 20rpx;
	margin-top: 10rpx;
	display: flex;
	justify-content: space-between;
}
.gd{
	display: flex;
	width: 345rpx;
	align-items: center;
	flex-direction: column;
}
.icon{
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 10rpx;
}
.gdname{
	font-size: 28rpx;
	color: #585858;
}
.bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 750rpx;
}

.top{
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	background: #F11E1E;
}
.topn{
	display: flex;
	height: 88rpx;
	justify-content: space-between;
}
.title{
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
}

.change_left{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.left{
	background: linear-gradient(to bottom right, #ffb6d7, #8bd6ff);
	padding: 5px 20px;
	border-radius: 20px 0px 0px 20px;
}
.change_t{
	font-size: 14px;
	color: #585858;
}
.change_t1{
	font-size: 14px;
	color: #585858;
	width: 100rpx;
}
.right{
	border-radius: 0px 20px 20px 0px;
	background: #efefef;
}

.datas{
	background: #ffffff;
	padding: 20rpx;
	margin-top: 20rpx;
}
.kuai{
	margin-top: 20rpx;
}
.title1{
	font-size: 28rpx;
	color: #ababab;
}
.dank{
	margin-top: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20rpx;
}
.val1{
	font-size: 30rpx;
	color: #000;
}
.info1{
	font-size: 28rpx;
	color: #353535;
}

.infos{
	font-size: 26rpx;
	color: #ffffff;
	background:linear-gradient(to right, #9cbbe9, #70d4eb);
	padding: 0rpx 10rpx;
	border-radius: 40rpx;
}

.tbcon{
	background: #ffffff;
	margin-top: 20rpx;
}
.title2{
	font-size: 30rpx;
	font-weight: bold;
}
.danxuan{
	font-size: 28rpx;
	color: #585858;
	background: #e8e8e8;
	margin-left: 20rpx;
	padding: 5rpx 20rpx;
	border-radius: 50rpx;
}
.danxuans{
	color: #ffffff;
	background: red;
}

/* X轴文字外部显示的图表样式 */
.external-x-chart-container {
	padding: 20rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	position: relative;
}

.chart-header {
	margin-bottom: 20rpx;
	text-align: center;
}

.chart-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.external-x-chart {
	display: flex;
	flex-direction: row;
	height: 450rpx;
	margin-top: 20rpx;
}

.y-axis-container {
	width: 80rpx;
	position: relative;
	flex-shrink: 0;
}

.y-axis {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	padding-right: 10rpx;
	height: 100%;
}

.y-label {
	font-size: 20rpx;
	color: #666666;
	line-height: 1;
}

/* Y轴标题 */
.axis-title {
	position: absolute;
	font-size: 24rpx;
	color: #333333;
	font-weight: 500;
}

.y-axis-title {
	left: -30rpx;
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
}

/* 主图表区域容器 */
.main-chart-area-container {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* 可滚动的主图表区域 */
.scrollable-main-chart-area {
	flex: 1;
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	padding: 20rpx 0; /* 只保留上下padding，左右为0 */
}

.scroll-content {
	height: 100%;
	position: relative;
}

.main-chart-area {
	height: 100%;
	position: relative;
	min-width: 100%;
}

.grid-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 20rpx; /* 为X轴线留出空间 */
}

.horizontal-grid {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 20rpx; /* 为X轴线留出空间 */
}

.horizontal-line {
	position: absolute;
	left: 0;
	right: 0;
	height: 1rpx;
	background-color: #f0f0f0;
}

.horizontal-line:nth-child(1) { top: 0; }
.horizontal-line:nth-child(2) { top: 25%; }
.horizontal-line:nth-child(3) { top: 50%; }
.horizontal-line:nth-child(4) { top: 75%; }
.horizontal-line:nth-child(5) { bottom: 20rpx; } /* 为X轴线留出空间 */

.vertical-grid {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 20rpx; /* 为X轴线留出空间 */
}

.vertical-line {
	position: absolute;
	top: 0;
	bottom: 20rpx; /* 为X轴线留出空间 */
	width: 1rpx;
	background-color: #f0f0f0;
}

.fill-areas {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 20rpx; /* 为X轴线留出空间 */
}

.fill-area {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: left bottom;
}

.store-fill {
	z-index: 1;
}

.purchase-fill {
	z-index: 2;
}

.meal-fill {
	z-index: 3;
}

.chart-lines {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 20rpx; /* 为X轴线留出空间 */
}

.line {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: left bottom;
}

.store-line {
	z-index: 4;
}

.purchase-line {
	z-index: 5;
}

.meal-line {
	z-index: 6;
}

.data-points {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 20rpx; /* 为X轴线留出空间 */
}

.point {
	position: absolute;
	width: 20rpx;
	height: 20rpx;
	transform: translate(-50%, 50%);
	z-index: 7;
	display: flex;
	align-items: center;
	justify-content: center;
}

.point-inner {
	width: 8rpx;
	height: 8rpx;
	border-radius: 50%;
}

.store-point .point-inner {
	background-color: #1890FF;
}

.purchase-point .point-inner {
	background-color: #52C41A;
}

.meal-point .point-inner {
	background-color: #FA541C;
}

.x-axis-line {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2rpx;
	background-color: #999999;
}

/* 外部X轴标签 */
.external-x-axis {
	height: 60rpx; /* X轴标签区域高度 */
	position: relative;
	width: 100%;
}

.external-x-axis-labels {
	position: relative;
	height: 60rpx;
	width: 100%;
}

.external-x-label {
	position: absolute;
	font-size: 20rpx;
	color: #666666;
	transform: translateX(-50%);
	white-space: nowrap;
	line-height: 60rpx;
	bottom: 0;
}

/* X轴标题 */
.x-axis-title {
	position: absolute;
	bottom: -40rpx;
	left: 50%;
	transform: translateX(-50%);
	font-size: 24rpx;
	color: #333333;
	font-weight: 500;
}

/* 滚动条容器 */
.scrollbar-container {
	height: 10rpx;
	background-color: #f0f0f0;
	border-radius: 5rpx;
	margin: 10rpx 80rpx 40rpx 80rpx;
	position: relative;
}

.scrollbar {
	position: absolute;
	height: 100%;
	background-color: #1890FF;
	border-radius: 5rpx;
	min-width: 20rpx;
}

/* 图例 */
.external-x-legend {
	display: flex;
	justify-content: center;
	margin-top: 20rpx;
	padding: 20rpx;
	background: #fafafa;
	border-radius: 10rpx;
}
</style>